<!-- 新增/编辑辅助器具适配 -->
<template>
  <el-card>
    <el-steps :active="active" align-center class="mt30" finish-status="success" style="margin: 0 200px">
      <el-step title="器具适配基本信息" />
      <el-step title="控制器具适配权限" />
    </el-steps>
    <div class="form-box" v-if="active===1">
      <el-form ref="form" :model="formInfo" :rules="rules" label-suffix="：" label-width="auto">
        <el-form-item label="器具适配标题" prop="assistActivityTitle">
          <el-input v-model="formInfo.assistActivityTitle" placeholder="请输入器具适配标题" />
        </el-form-item>
        <el-form-item label="适配活动说明" prop="assistActivityDesc">
          <el-input
            type="textarea"
            v-model="formInfo.assistActivityDesc"
            :autosize="{ minRows: 3}"
            placeholder="请输入适配活动说明"
          />
        </el-form-item>
        <el-form-item label="适配活动时间" prop="time">
          <el-date-picker
            v-model="formInfo.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
        <div class="bottom-btn">
          <el-button type="primary" @click="nextStep()">保存并返回</el-button>
          <el-button type="primary" @click="nextStep(1)">保存并下一步</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </div>
      </el-form>
    </div>

    <div v-else class="form-box1">
      <div class="flex-box">选择适配残疾人：
        <el-button type="primary" class="ml10 mr10" @click="searchDisabled('辅助器具')">辅助器具适配</el-button>
        <el-button type="primary" class="ml10 mr10" @click="searchDisabled('基本服务')">基本服务适配</el-button>
        <el-upload
          ref="upload"
          :show-file-list="false"
          :file-list="fileList"
          :limit="1"
          accept=".xls,.xlsx,.csv"
          name="files"
          :data="{fileTypes:'xlsx'}"
          :action="imgHead"
          :headers="head"
          :on-change="upload_change"
          :http-request="Execute_File"
        >
          <el-button :loading="loading" type="primary" class="mr10">动态更新Excel导入</el-button>
        </el-upload>
        <el-button type="success" @click="downTemplate">下载Excel导入模板</el-button>
        <el-button type="danger" @click="delDisabled">删除适配人员</el-button>
      </div>

      <page-table
        ref="disabled1"
        :page-data="currentDisabled"
        :do-get-page-data="getBindPageData"
        class="mt30 pt"
        :loading="loading"
        empty-text="您还未选择残疾人"
        @select-change="handleSelectionChange1"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="编号" width="80" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="birth" label="出生年月" align="center" />
        <el-table-column prop="nativePlace" label="籍贯" align="center" />
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <el-table-column prop="disabledCard" label="残疾证号" align="center" />
        <el-table-column prop="applyType" label="康复类型" align="center" />
        <el-table-column prop="disabledType" label="残疾类别" align="center">
          <template slot-scope="scope">
            {{ scope.row.disabledType.split(',').map(v=> getDictionary('DIS_TYPE','map')[v]).join(',') }}
          </template>
        </el-table-column>
        <el-table-column prop="disabledLevel" label="残疾等级" align="center">
          <template slot-scope="scope">
            {{ scope.row.disabledLevel | keyText("DIS_LEVEL") }}
          </template>
        </el-table-column>
      </page-table>
      <div class="bottom-btn mt10">
        <el-button type="primary" @click="$router.go(-1)">保存</el-button>
      </div>
    </div>

    <el-dialog width="75%" :visible.sync="searchDisabledStatus" title="残疾人适配清单" @close="close">
      <el-row>
        <el-form ref="search" :model="searchDto" inline label-suffix="：">
          <el-form-item label="关键字" prop="keywords">
            <el-input v-model="searchDto.keywords" placeholder="残疾人姓名/籍贯" style="width:250px" />
          </el-form-item>
          <el-form-item label="残疾类别" prop="disabledTypeKey" label-width="100px">
            <el-select v-model="searchDto.disabledTypeKey" placeholder="请选择残疾类别">
              <el-option
                v-for="item in getDictionary('DIS_TYPE')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="残疾等级" prop="disabledLevel" label-width="100px">
            <el-select v-model="searchDto.disabledLevel" placeholder="请选择残疾等级">
              <el-option
                v-for="item in getDictionary('DIS_LEVEL')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-s-open" type="primary" @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="disabled"
        :page-data="pageData"
        :do-get-page-data="getPageData"
        @select-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="编号" width="80" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="birth" label="出生年月" align="center" />
        <el-table-column prop="nativePlace" label="籍贯" align="center" />
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <el-table-column prop="disabledCard" label="残疾证号" align="center" />
        <el-table-column prop="disabledType" label="残疾类别" align="center">
          <template slot-scope="scope">
            {{ scope.row.disabledType.split(',').map(v=> getDictionary('DIS_TYPE','map')[v]).join(',') }}
          </template>
        </el-table-column>
        <el-table-column prop="disabledLevel" label="残疾等级" align="center">
          <template slot-scope="scope">
            {{ scope.row.disabledLevel | keyText("DIS_LEVEL") }}
          </template>
        </el-table-column>
      </page-table>
      <div slot="footer">
        <el-button type="primary" @click="saveDisabled">确定</el-button>
        <el-button @click="searchDisabledStatus=false">取消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  name: "AddOrEditAdaptation",
  data() {
    return {
      applyType : '',
      loading: false,
      active: 1,
      activityId: null,
      formInfo: {
        assistActivityTitle: null,
        assistActivityDesc: null,
        time: [],
        startTime: null,
        endTime: null,
      },
      rules: {
        assistActivityTitle: [{ required: true, message: "请输入器具适配标题", trigger: "blur" }],
        assistActivityDesc: [{ required: true, message: "请输入适配活动说明", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
      },
      searchDisabledStatus: false,
      searchDto: {
        pageIndex: 1,
        pageSize: 10,
        keywords: null,
        disabledTypeKey: null,
        disabledLevel: null,
      },
      searchDto1: {
        pageIndex: 1,
        pageSize: 10
      },
      pageData: {},
      multipleSelection: [],
      multipleSelection1: [],
      currentDisabled: {},
      fileList: [],
      upload_List: [], //上传的file,
      // 上传配置
      imgHead: '',
      head: {
        userRole: "ADMIN",
        token: window.sessionStorage.getItem("token"),
        'Content-Type': 'multipart/form-data',
        'Accept': 'application/json'
      }
    }
  },
  methods: {
    close() {
      this.searchDto = {
        pageIndex: 1,
        pageSize: 10,
        keywords: null,
        disabledTypeKey: null,
        disabledLevel: null,
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val
    },
    // 下载
    downTemplate() {
      window.location.href =
        window.api.image1 + 'template/辅助器具适配_动态更新导入模板.xlsx';
    },
    delDisabled() {
      if (!this.multipleSelection1.length) return this.warning('请选择残疾人')
      this.$confirm("确认删除吗?", "提示", { type: "warning" }).then(() => {
        this.API.deleteDisabledsByIdAndUserIds({ id: this.activityId, body: this.multipleSelection1.map(v => v.userId) }).then(res => {
          this.success('删除成功')
          this.getBindPageData()
        })
      })
    },

    saveDisabled() {
      this.API.saveDisableds({ id: this.activityId, applyType: this.applyType, body: this.multipleSelection.map(v => v.userId) }).then(res => {
        this.success('保存成功')
        this.searchDisabledStatus = false
        this.getBindPageData()
        this.close()
      })
    },

    // 下一步
    nextStep(type) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formInfo.time.length) {
            this.formInfo.startTime = this.formInfo.time[0]
            this.formInfo.endTime = this.formInfo.time[1]
            delete this.formInfo.time
          }

          this.API[this.$route.query.id ? 'addOrUpdateAssistActivityInfo' : 'addAssistActivityInfo']({ body: this.formInfo }).then(res => {
            this.activityId = this.isNumber(res.data) ? res.data : this.$route.query.id
            this.success('保存成功')
            if (type) {
              this.active = 2
              this.getBindPageData()
            } else this.$router.go(-1)
          })
        }
      })
    },

    searchDisabled(applyType) {
      this.getPageData()
      this.searchDisabledStatus = true
      this.applyType = applyType
      console.log("applyType="+applyType);
    },

    search() {
      this.getPageData()
    },

    clear() {
      this.$refs["search"].resetFields();
      this.getPageData()
    },

    // 查询未绑定的残疾人
    getPageData(val) {
      Object.assign(this.searchDto, val, { id: this.activityId });
      this.API.getUnBindDisabledUserInfoById(this.searchDto).then(ret => {
        this.pageData = ret.data;
      });
    },

    // 查询已绑定的残疾人
    getBindPageData(val) {
      Object.assign(this.searchDto1, { id: this.activityId }, val);
      this.API.getBindDisabledUserInfoById(this.searchDto1).then(ret => {
        this.currentDisabled = ret.data;
      });
    },
    upload_change(file, fileList) {
      this.upload_List.push(file.raw)
    },

    // 导入
    Execute_File() {
      this.loading = true
      let file = this.upload_List[0]
      let formData = new FormData();
      formData.append("file", file);
      let fileSuffix =
        file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
      this.ExportApi.saveDisabledsExcel({ id: this.activityId, fileTypes: fileSuffix }, formData)
        .then(() => {
          this.loading = false
          this.upload_List = []
          this.fileList = []
          this.getBindPageData()
          this.success('导入成功')
        })
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.API.getAssistActivityDetailInfoById({ id: this.$route.query.id }).then(ret => {
        for (let i in this.formInfo) this.formInfo[i] = ret.data[i]
        this.formInfo.id = ret.data.id
        this.imgHead = window.api.uploadExeUrl + ret.data.id
        this.$nextTick(() => {
          this.formInfo.time = []
          this.formInfo.time[0] = new Date(this.formInfo.startTime).Format('yyyy-MM-dd hh:mm:ss')
          this.formInfo.time[1] = new Date(this.formInfo.endTime).Format('yyyy-MM-dd hh:mm:ss')
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .form-box {
    width: 40%;
    margin: 60px auto 0;
  }

  .form-box1 {
    margin: 60px auto 0;
  }

  ::v-deep {
    .el-step__title {
      line-height: 50px;
    }

    .el-step.is-horizontal .el-step__line {
      top: 25px
    }

    .el-step__icon {
      width: 50px;
      height: 50px;
      font-size: 28px
    }
  }

  .bottom-btn {
    text-align: center;
    margin-top: 100px
  }

  .flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -2vw;
  }
</style>
